<template>

  <div class="filter-container">
    <el-row>
      <el-col span="3">
        <el-form-item label="货物名">
          <el-input  placeholder="请输入货物名" v-model="state.pagination.name" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
          <el-form-item label="货物类型">
            <el-input  placeholder="请输入货物类型" v-model="state.pagination.type" clearable />
          </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货物性质">
          <el-input  placeholder="请输入货物性质" v-model="state.pagination.nature" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-button @click="load" >查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate">新建</el-button>
      </el-col>
    </el-row>

  </div>

  <el-table :data="state.dataList"  style="width: 100%" >
    <el-table-column label="ID" align="center" prop="id"></el-table-column>
    <el-table-column label="OID" align="center" prop="order_id"></el-table-column>
    <el-table-column label="仓库名" align="center" prop="depository.name" ></el-table-column>
    <el-table-column label="司机名" align="center" prop="driver.driverName" ></el-table-column>
    <el-table-column label="包装类型" align="center" prop="pack.type" ></el-table-column>
    <el-table-column label="货物名" align="center" prop="name" width="150"></el-table-column>
    <el-table-column label="货物类型" align="center" prop="type"></el-table-column>
    <el-table-column label="重量" align="center" prop="weight"></el-table-column>
    <el-table-column label="体积" align="center" prop="size"></el-table-column>
    <el-table-column label="数量" align="center" prop="quantity" ></el-table-column>
    <el-table-column label="货物性质" align="center" prop="nature" ></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="180" >
      <template v-slot="{row}">
        <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
<!--        <el-button link type="primary" size="small" @click="handlePack(row)">包装</el-button>-->
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">

    <el-pagination
        class="pagiantion"

        @current-change="handleCurrentChange"

        @size-change="handleSizeChange"

        :current-page="state.pagination.currentPage"

        :page-size="state.pagination.pageSize"

        :page-sizes="[1, 2, 3]"

        layout="total, sizes, prev, pager, next, jumper"

        :total="state.pagination.total">

    </el-pagination>
  </div>


  <!--  新增货物弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible"
      title="新增货物"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData" :rules="rules" ref="ruleFormRef">
    <el-row>
      <el-form-item label="选择订单" prop="order_id">
    <el-select v-model="state.formData.order_id" placeholder="请选择订单" style="width: 240px">
      <el-option
          v-for="item in state.options1"
          :key="item"
          :value="item"
      />
    </el-select>
     </el-form-item>
      <el-form-item label="选择仓库" prop="depository">
    <select v-model="state.formData.depository" placeholder="请选择仓库" style="width: 240px">
      <option
          v-for="item in state.options2"
          :key="item"
          :label="item.name"
          :value="item"
      />
    </select>
     </el-form-item>
      <el-form-item label="选择司机" prop="driver">
    <select v-model="state.formData.driver" placeholder="请选择司机" style="width: 240px" >
      <option
          v-for="item in state.options3"
          :key="item"
          :label="item.driverName"
          :value="item"
      />
    </select>
        </el-form-item>
        <el-form-item label="选择包装" prop="pack">
    <select v-model="state.formData.pack" placeholder="请选择包装" style="width: 240px" >
      <option
          v-for="item in state.options4"
          :key="item"
          :label="item.type"
          :value="item"
      />
    </select>
     </el-form-item>

        <el-col span="3">
        <el-form-item label="货物名称" prop="name">
          <el-input  placeholder="请输入货物名称" v-model="state.formData.name"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="货物类型" prop="type">
          <el-input  placeholder="请输入货物类型" v-model="state.formData.type"  clearable />
        </el-form-item>
      </el-col>

      <el-col span="3">
        <el-form-item label="重量" prop="weight">
          <el-input  placeholder="请输入货物重量" v-model="state.formData.weight" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="体积" prop="size">
          <el-input  placeholder="请输入货物体积" v-model="state.formData.size"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="数量" prop="quantity">
          <el-input  placeholder="请输入货物数量" v-model="state.formData.quantity" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货物性质" prop="nature">
          <el-input  placeholder="请输入货物性质" v-model="state.formData.nature"  clearable />
        </el-form-item>
      </el-col>
    </el-row>
              </el-form>
  </div>

          <el-button @click="state.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd(ruleFormRef)">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

  <!--修改货物弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible4Edit"
      title="修改货物"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form v-model="state.formData">

    <el-row>
      <el-form-item label="订单id">
    <el-select v-model="state.formData.order_id" placeholder="请选择订单" disabled style="width: 240px">
      <el-option
          v-for="item in state.options1"
          :key="item"
          :value="item"
      />
    </el-select>
     </el-form-item>
      <el-form-item label="仓库名">
    <select v-model="state.formData.depository" placeholder="请选择仓库" style="width: 240px">
      <option
          v-for="item in state.options2"
          :key="item"
          :label="item.name"
          :value="item"
      />
    </select>
     </el-form-item>
      <el-form-item label="司机名">
    <select v-model="state.formData.driver" :value="state.formData.driver.driverName" placeholder="请选择司机" style="width: 240px" >
      <option
          v-for="item in state.options3"
          :key="item"
          :label="item.driverName"
          :value="item"
      />
    </select>
     </el-form-item>
      <el-form-item label="包装类型">
    <select v-model="state.formData.pack" placeholder="请选择包装" style="width: 240px" >
      <option
          v-for="item in state.options4"
          :key="item"
          :label="item.type"
          :value="item"
      />
    </select>
     </el-form-item>
        <el-col span="3">
        <el-form-item label="货物名称">
          <el-input  placeholder="请输入货物名称" v-model="state.formData.name" disabled clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="货物类型">
          <el-input  placeholder="请输入货物类型" v-model="state.formData.type" disabled clearable />
        </el-form-item>
      </el-col>

      <el-col span="3">
        <el-form-item label="重量">
          <el-input  placeholder="请输入货物重量" v-model="state.formData.weight" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="体积">
          <el-input  placeholder="请输入货物体积" v-model="state.formData.size"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="数量">
          <el-input  placeholder="请输入货物数量" v-model="state.formData.quantity" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货物性质">
          <el-input  placeholder="请输入货物性质" v-model="state.formData.nature"  clearable />
        </el-form-item>
      </el-col>
    </el-row>

            </el-form>
  </div>

          <el-button @click="state.dialogFormVisible4Edit = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>



</template>

<script setup>
import {reactive,ref} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import instance from "../../../request";
const state=reactive({
  dataList: [],//表格数据
  options1:[],
  options2:[],
  options3:[],
  options4:[],
  selectedOptions: [],
  formData: {
    order_id:"",
    depository:"",
    driver:"",
    pack:"",
    name:"",
    type:"",
    weight:"",
    size:"",
    quantity:"",
    nature:""
  },

  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit:false,//编辑表单是否可见
  pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:3,//每页显示的记录数
    total:0,//总记录数
    name: "",
    type: "",
    nature: ""
  }
  // rules: {//校验规则
  //   type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
  //   name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
  // },
})

const ruleFormRef=ref(null);

const rules = reactive({
  order_id: [
    {required: true,message:"请选择订单号",trigger: "change"},
  ],
  depository: [
    {required: true,message:"请选择仓库",trigger: "change"},
  ],
  driver: [
    {required: true,message:"请选择司机",trigger: "change"},
  ],
  pack: [
    {required: true,message:"请选择包装",trigger: "change"},
  ],
  name: [
    {required: true,message:"请输入货品名",trigger: "blur"},
  ],
  type:[
    {required: true,message:"请输入货品类型",trigger: "blur"},
  ],
  weight: [
    {required: true,message:"请输入货品重量",trigger: "blur"},
  ],
  size: [
    {required: true,message:"请输入货品体积",trigger: "blur"},
  ],
  quantity: [
    {required: true,message:"请输入货品数量",trigger: "blur"},
  ],
  nature: [
    {required: true,message:"请输入货品属性",trigger: "blur"},
  ]
})

//获取所有订单id
const getOrderId=()=>{
  instance.get('/goods/oid').then(res=>{
    // console.log(res.data)
    state.options1=res.data
  })
}
//获取所有仓库
const getDepository=()=>{
  instance.get('/goods/depository').then(res=>{
    // console.log(res.data)
    state.options2=res.data
  })
}
//获取所有司机
const getDriver=()=>{
  instance.get('/goods/driver').then(res=>{
    // console.log(res.data)
    state.options3=res.data
  })
}
//获取所有包装
const getPackage=()=>{
  instance.get('/goods/package').then(res=>{
    // console.log(res.data)
    state.options4=res.data
  })
}


const load=()=>{
  // instance.get('/goods').then(res=>{
  //   // console.log(res.data)
  //   state.dataList=res.data
  // })
  let param = "?name="+state.pagination.name;
  param+= "&type="+state.pagination.type;
  param+= "&nature="+state.pagination.nature;
  console.log("-----------------"+ param);
  instance.get("/goods/"+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then((res)=>{
    state.pagination.total = res.data.total;
    // state.pagination.currentPage = res.data.current;
    // state.pagination.pagesize = res.data.size;
    state.dataList=res.data.list;
  })
}
const   handleCreate=()=> {
  getOrderId();
  getDepository();
  getDriver();
  getPackage();
  state.dialogFormVisible = true;
  resetForm();
}

const resetForm=()=> {
  state.formData={};
}
const cancel=()=>{
  this.dialogFormVisible = false;
  this.dialogFormVisible4Edit = false;
  // this.$message.info("操作取消");
}

const bill=reactive({
  billDesc: "",
  amount:0
})

// const handlePack=(row)=>{
  // console.log(row.pack.type)
  // instance.get("/goods/getCost/"+row.id).then((res)=>{
  //   bill.amount=res.data;
  //   bill.billDesc=row.pack.type;
  //   console.log(bill.amount)
  //   console.log(bill.billDesc)
  //   instance.post("/goods/goodsCost/",bill).then((res)=>{
  //     if(res.data){
  //       ElMessage({
  //         type: 'success',
  //         message: '包装成本加入成功',
  //       })
  //     }else {
  //       ElMessage({
  //         type: 'error',
  //         message: '包装成本加入失败',
  //       })
  //     }
  //   })
  // })



  // instance.get("/goods/getIncome/"+row.id).then((res)=>{
  //   bill.amount=res.data;
  //   bill.billDesc=row.pack.type;
  //   instance.post("/goods/goodsIncome/",bill).then((res)=>{
  //     if(res.data){
  //       ElMessage({
  //         type: 'success',
  //         message: '包装收入加入成功',
  //       })
  //     }else {
  //       ElMessage({
  //         type: 'error',
  //         message: '包装收入加入失败',
  //       })
  //     }
  //   })
  // })



// }


//添加
const handleAdd=async (formEl)=> {
  await formEl.validate((valid, fields) => {
    if(valid) {
      console.log(state.formData)
      instance.post("/goods/", state.formData).then((res) => {
//如果操作成功，关闭弹层，显示数据
        if (res.flag) {
          state.dialogFormVisible = false;
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
        } else {
          ElMessage({
            type: 'error',
            message: '添加失败',
          })
        }
      }).finally(() => {
        load()
      });
    }else {
      ElMessage({
        type: 'error',
        message: '信息未完全填入，请补充完整',
      })
    }
  })
}

const  handleEdit=(row)=> {
  console.log(row.id)
  instance.get("/goods/"+row.id).then(res=>{
    if(res.flag){
      console.log(res.data.driver.driverName)
//展示弹层，加载数据
      state.formData=res.data
      getOrderId();
      getDepository();
      getDriver();
      getPackage();
      state.dialogFormVisible4Edit = true;
    }else{
      console.log("失败")
    }
  })
}

const handleUpdate=()=>{
  console.log(state.formData);
  instance.put("/goods/",state.formData).then(res=>{
    if(res.flag){
      console.log("修改成功")
      state.dialogFormVisible4Edit = false;
    }else{
      console.log("失败");
    }
  }).finally(()=>{
    load()
  })





}




const handleDelete=(row)=> {
  instance.get("/goods/getOrderStatus/"+row.order_id).then(res=>{
    console.log(res.data)
    if(res.data){
      ElMessageBox.confirm(
          '是否删除改货物?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            instance.delete("/goods/"+row.id).then((res)=>{
              if(res.flag){
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
              }else{
                ElMessage({
                  type: 'error',
                  message: '删除失败',
                })
              }
            }).finally(()=>{
              load()
            });
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            })
          })
    }else {
      ElMessage({
        type: 'error',
        message: '货物已在运输中,禁止删除',
      })
    }
  })

}
const handleCurrentChange=(currentPage)=>{
  state.pagination.currentPage=currentPage;
  load();
}
const handleSizeChange=(pageSize)=>{
  state.pagination.pageSize=pageSize;
  load();
}

load();






</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
</style>